<template>
  <view>
    <view 
      class="bill-month-group" 
      v-for="(monthGroup, idx) in expenseData" 
      :key="idx"
    >
      <view class="bill-month-header">
        <text class="month">{{ monthGroup.month }}</text>
        <text class="summary">
          总支出: ¥{{ monthGroup.totalExpense }}  总收入: ¥{{ monthGroup.totalIncome }}
        </text>
      </view>

      <view 
        class="bill-item" 
        v-for="(item, i) in monthGroup.items" 
        :key="i"
      >
        <image class="bill-icon" :src="item.icon" />
        <view class="bill-info">
          <view class="bill-title">{{ item.title }}</view>
          <view class="bill-date">{{ item.date }}</view>
        </view>
        <view class="bill-amount out">
          -¥{{ item.amount }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue';
import { getExpenseTransactions } from '../../../utils/api';

const expenseData =ref([
  {
    month: '十月',
    totalExpense: '1500.00',
    totalIncome: '0.00',
    items: [
      {
        icon: '/static/walmart.png',
        title: '沃尔玛超市',
        date: '2023-10-03 18:10:23',
        amount: '500.00',
      },
      {
        icon: '/static/taobao.png',
        title: '淘宝购物',
        date: '2023-10-05 12:30:10',
        amount: '1000.00',
      },
    ],
  },
  {
    month: '九月',
    totalExpense: '1200.00',
    totalIncome: '0.00',
    items: [
      {
        icon: '/static/walmart.png',
        title: '沃尔玛超市',
        date: '2023-09-22 14:21:45',
        amount: '1200.00',
      },
    ],
  },
])

// 获取数据
onMounted(()=>{
	getExpenseTransactions().then(res=>{
		// 构造合适的数据
		// 加入到expenseData中
		expenseData.value.push(res)
	})
})

</script>
<style src="./all.css"></style> 